<template>
	<view class="login-container">
		<!-- 顶部蓝色区域 -->
		<view class="top-blue-section">
			<!-- 背景图片 -->
			<image class="blue-bg-image" src="/static/login/组 6@3x.png" mode="aspectFill"></image>
			
			<!-- 标题 -->
			<view class="welcome-title">
				<text>欢迎来到车联网服务平台商家端</text>
			</view>
			
			<!-- 插图 -->
			<view class="illustration-section">
				<image class="illustration-image" src="/static/login/组 6@3x(1).png" mode="aspectFit"></image>
			</view>
		</view>
		
		<!-- 底部白色登录表单 -->
		<view class="bottom-white-section">
			<!-- 标题 -->
			<view class="form-title">
				<text>手机号登录</text>
			</view>
			
			<!-- 手机号输入框 -->
			<view class="input-wrapper">
				<input 
					class="phone-input" 
					v-model="phoneNumber" 
					placeholder="手机号登陆"
					type="number"
					maxlength="11"
				/>
			</view>
			
			<!-- 验证码输入框 -->
			<view class="input-wrapper code-input-wrapper">
				<input 
					class="code-input" 
					v-model="verifyCode" 
					placeholder="输入验证码"
					type="number"
					maxlength="6"
				/>
				<button 
					class="get-code-btn" 
					:disabled="countdown > 0 || !phoneNumber"
					@click="handleGetCode"
				>
					{{ countdown > 0 ? `${countdown}秒` : '获取验证码' }}
				</button>
			</view>
			
			<!-- 注册链接 -->
			<view class="register-link" @click="handleRegister">
				<text>立即注册</text>
			</view>
			
			<!-- 登录按钮 -->
			<button class="login-btn" @click="handleLogin" :disabled="!canLogin">
				登录
			</button>
		</view>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				phoneNumber: '',
				verifyCode: '',
				countdown: 0,
				timer: null
			}
		},
		computed: {
			canLogin() {
				return this.phoneNumber.trim().length === 11 && this.verifyCode.trim().length >= 4
			}
		},
		onUnload() {
			if (this.timer) {
				clearInterval(this.timer)
			}
		},
		methods: {
			handleGetCode() {
				if (!this.phoneNumber || this.phoneNumber.length !== 11) {
					uni.showToast({
						title: '请输入正确的手机号',
						icon: 'none'
					})
					return
				}
				
				// TODO: 调用获取验证码接口
				uni.showToast({
					title: '验证码已发送',
					icon: 'success'
				})
				
				// 开始倒计时
				this.countdown = 60
				this.timer = setInterval(() => {
					this.countdown--
					if (this.countdown <= 0) {
						clearInterval(this.timer)
						this.timer = null
					}
				}, 1000)
			},
			handleLogin() {
				if (!this.canLogin) {
					uni.showToast({
						title: '请输入手机号和验证码',
						icon: 'none'
					})
					return
				}
				
				if (!/^1[3-9]\d{9}$/.test(this.phoneNumber)) {
					uni.showToast({
						title: '请输入正确的手机号',
						icon: 'none'
					})
					return
				}
				
				// TODO: 实现登录逻辑
				uni.showToast({
					title: '登录成功',
					icon: 'success'
				})
				
				// 登录成功后跳转
				setTimeout(() => {
					uni.switchTab({
						url: '/pages/index/index'
					})
				}, 1500)
			},
			handleRegister() {
				uni.showToast({
					title: '注册功能',
					icon: 'none'
				})
			}
		}
	}
</script>

<style lang="scss" scoped>
	.login-container {
		width: 100%;
		height: 100vh;
		display: flex;
		flex-direction: column;
		background: #fff;
	}
	
	/* 顶部蓝色区域 */
	.top-blue-section {
		height: 400rpx;
		position: relative;
		display: flex;
		flex-direction: column;
		align-items: center;
		justify-content: center;
		overflow: hidden;
	}
	
	.blue-bg-image {
		position: absolute;
		top: 0;
		left: 0;
		width: 100%;
		height: 100%;
		z-index: 0;
	}
	
	.welcome-title {
		position: relative;
		z-index: 1;
		margin-top: 40rpx;
		margin-bottom: 20rpx;
		padding: 0 40rpx;
		
		text {
			color: #fff;
			font-size: 40rpx;
			font-weight: 500;
			line-height: 1.5;
			text-align: center;
		}
	}
	
	.illustration-section {
		position: relative;
		z-index: 1;
		display: flex;
		align-items: center;
		justify-content: center;
		width: 100%;
		flex: 1;
		padding-bottom: 10rpx;
		
		.illustration-image {
			width: 450rpx;
			height: 280rpx;
			max-width: 65%;
		}
	}
	
	/* 底部白色区域 */
	.bottom-white-section {
		flex: 1;
		background: #fff;
		border-radius: 40rpx 40rpx 0 0;
		padding: 50rpx 40rpx 300rpx;
		margin-top: -20rpx;
		position: relative;
		z-index: 2;
		box-shadow: 0 -4rpx 20rpx rgba(0, 0, 0, 0.05);
		display: flex;
		flex-direction: column;
		justify-content: flex-start;
	}
	
	.form-title {
		margin-bottom: 40rpx;
		font-size: 32rpx;
		font-weight: 500;
		color: #333;
		text-align: center;
	}
	
	.input-wrapper {
		margin-bottom: 40rpx;
		border-bottom: 1rpx solid #e0e0e0;
		padding-bottom: 20rpx;
		
		.phone-input,
		.code-input {
			width: 100%;
			height: 60rpx;
			font-size: 28rpx;
			color: #333;
			background: transparent;
		}
		
		.phone-input::placeholder,
		.code-input::placeholder {
			color: #999;
			font-size: 28rpx;
		}
	}
	
	.code-input-wrapper {
		display: flex;
		align-items: center;
		justify-content: space-between;
		
		.code-input {
			flex: 1;
			margin-right: 20rpx;
		}
		
		.get-code-btn {
			padding: 12rpx 24rpx;
			background: #007aff;
			color: #fff;
			border: none;
			border-radius: 8rpx;
			font-size: 24rpx;
			line-height: 1;
			white-space: nowrap;
			
			&:disabled {
				background: #ccc;
				opacity: 0.6;
			}
		}
	}
	
	.register-link {
		margin-bottom: 40rpx;
		display: flex;
		align-items: center;
		
		text {
			color: #007aff;
			font-size: 28rpx;
		}
		
		&::after {
			content: '';
			display: inline-block;
			width: 12rpx;
			height: 12rpx;
			border-right: 2rpx solid #007aff;
			border-bottom: 2rpx solid #007aff;
			margin-left: 8rpx;
			transform: rotate(-45deg) translateY(4rpx);
		}
	}
	
	.login-btn {
		width: 100%;
		height: 88rpx;
		line-height: 88rpx;
		background: linear-gradient(135deg, #007aff 0%, #0051d5 100%);
		color: #fff !important;
		border: none;
		border-radius: 44rpx;
		font-size: 32rpx;
		font-weight: 500;
		margin-top: auto;
		
		&:disabled {
			background: #ccc;
			color: #fff !important;
			opacity: 0.6;
		}
		
		&:active {
			opacity: 0.8;
		}
	}
</style>
